<style type="text/css">
    body { margin-top:20px; }
    .modal-body:not(.two-col) { padding:0px }
    .glyphicon { margin-right:5px; }
    .glyphicon-new-window { margin-left:5px; }
    .modal-body .radio,.modal-body .checkbox {margin-top: 0px;margin-bottom: 0px;}
    .modal-body .list-group {margin-bottom: 0;}
    .margin-bottom-none { margin-bottom: 0; }
    .modal-body .radio label,.modal-body .checkbox label { display:block; }
    .modal-footer {margin-top: 0px;}
    @media screen and (max-width: 325px){
        .btn-close {
            margin-top: 5px;
            width: 100%;
        }
        .btn-results {
            margin-top: 5px;
            width: 100%;
        }
        .btn-vote{
            margin-top: 5px;
            width: 100%;
        }

    }
    .modal-footer .btn+.btn {
        margin-left: 0px;
    }
    .progress {
        margin-right: 10px;
    }


    body {
        margin-top: 2%
    }

    .ds-btn li{ list-style:none; float:left; padding:10px; }
    .ds-btn li a span{padding-left:15px;padding-right:5px;width:100%;display:inline-block; text-align:left;}
    .ds-btn li a span small{width:100%; display:inline-block; text-align:left;}

    .invoice-title h2, .invoice-title h3 {
        display: inline-block;
    }


    .modal-static { 
        position: fixed;
        top: 50% !important; 
        left: 50% !important; 
        margin-top: -100px;  
        margin-left: -100px; 
        overflow: visible !important;
    }
    .modal-static,
    .modal-static .modal-dialog,
    .modal-static .modal-content {
        width: 200px; 
        height: 200px; 
    }
    .modal-static .modal-dialog,
    .modal-static .modal-content {
        padding: 0 !important; 
        margin: 0 !important;
    }
    .modal-static .modal-content .icon {
    }

</style>

<!--botões de ações-->
<div class="container">
    <div class="row">
        <h4>Gerenciamento de cursos</h4>
        <hr/>
        <ul class="ds-btn">
            <li>
                <a class="btn btn-md btn-primary" id="btnNovoCurso"><strong>+</strong><span> Novo<br></span></a> 
            </li>
        </ul>

    </div>
</div>
<!--fim botões de ações-->


<!--Grid Listando Cursos-->
<hr/>
<div class="container">
    <div class="row"> 
        <div class="col-md-6">
            <form id="frmPesquisa">
                <div class="input-group">
                    <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH -->
                    <input class="form-control " id="inputPesquisar" placeholder="Pesquisar Por">
                    <span class="input-group-btn">
                        <a class="btn btn-default" id="btnPesquisar"><i class="glyphicon glyphicon-search"></i><span>Listar Todos</span></a>
                    </span>
                </div>
            </form>
        </div>
        <div class="col-md-12">
            <table class="table table-list-search table-striped table-hover" id="tableCursos">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Curso</th>
                        <th>Carga horária</th>
                        <th>Valor R$</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Editar</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Deletar</a></td>
                    </tr>
                </tbody>
            </table>   
        </div>
    </div>
</div>

<!--Fim Grid Listando Cursos-->

<!--Modal Cadastro de Cursos-->
<div class="container">
    <div class="row">
        <br/><br/><br/>
        <div class="modal fade" id="cadastroCursoModal" role="dialog" aria-labelledby="contactLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="panel-title" id="contactLabel"><img src="img/favicon.ico"/> Tela De Cadastro De Cursos</h4>
                    </div>
                    <form accept-charset="utf-8" id="frmCursos">
                        <div class="modal-body" style="padding: 5px;">
                            <div style="display:none" id="errorServer" class="alert alert-danger col-lg-8 col-md-8 col-sm-8"></div>
                            <span class="label label-danger" id="errorEmpty" style="display: none">Preencha Os Campos Destacados!</span>
                            <div class="alert alert-success" id="salvoSucesso" style="display: none">Curso Salvo Com Sucesso!</div>

                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    <!--Usado para saber quando está alterando ou gravando-->
                                    <input type="hidden" id="inputIdCurso">
                                    Curso
                                    <input class="form-control" id="inputCurso" placeholder="Nome Do Curso (Obrigatório)" type="text" autofocus />
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4" style="padding-bottom: 10px;">
                                    Categoria
                                    <select id="selectCategoria" class="form-control">

                                    </select>
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-2" style="padding-bottom: 10px;padding-top: 20px">
                                    <a class="btn btn-md btn-primary form-control" id="btnNovaCategoria"><strong>+</strong></a>  
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                    Público Alvo
                                    <input class="form-control" id="inputPublicoAlvo" placeholder="Público Alvo" type="text" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    Carga Horária
                                    <input class="form-control" id="inputCargaHoraria" type="number" />
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    Valor RS
                                    <input class="form-control moeda" id="inputValorCurso" placeholder="0,00" type="text" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    Objetivos Do Curso
                                    <textarea style="resize:vertical;" class="form-control" placeholder="Objetivos Do Curso" rows="6" id="inputObjetivosCurso"></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                    <br/>
                    <div class="alert alert-info" id="saveMessage" style="display: none"><img src="img/ajax-loader.gif"> Salvando...</div>
                    <div class="panel-footer" style="margin-bottom:-14px;">
                        <a class="btn btn-group-xs btn-success" id="salvar"><i class="glyphicon glyphicon-save pull-left"></i><span>Salvar<br></span></a> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Fim Modal Cadastro de Cursos-->


<!--modal de confirmação de exclusão do curso -->
<div class="container">
    <div class="row">
        <!-- Modal -->
        <div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="lblDeletar">Deseja Realmente Deletar O Curso  <small id="lblCursoDelete"></small></h4>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal" id="btnCancelarDelete">Cancelar</button>
                        <button type="button" class="btn btn-success" id="btnConfirmar">Confirmar</button>
                    </div>
                    <div class="alert-info" style="display: none" id="deleteMessage">
                        <img src="img/loading.gif" class="icon"/> Deletando...
                    </div>    
                </div>
            </div>
        </div> <!-- #/myModal -->
    </div> <!-- ./row-->
</div> <!-- ./container-->

